<template>
  <div class="main">
    <!-- 工具栏 -->
    <el-card shadow="never" class="mb-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <el-input
            v-model="searchForm.id"
            placeholder="广告位编号"
            clearable
            style="width: 200px"
          />
          <el-input
            v-model="searchForm.name"
            placeholder="广告名称"
            clearable
            style="width: 200px"
          />
          <el-select
            v-model="searchForm.status"
            placeholder="广告状态"
            clearable
            style="width: 120px"
          >
            <el-option value="已出租" label="已出租" />
            <el-option value="空置" label="空置" />
          </el-select>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button type="success" @click="showImportDialog">
            <el-icon><Upload /></el-icon>
            导入
          </el-button>
        </div>
        <el-button type="primary" @click="showAddDialog">
          <el-icon><Plus /></el-icon>
          添加
        </el-button>
      </div>
    </el-card>

    <!-- 广告列表表格 -->
    <el-card shadow="never">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column prop="id" label="广告位编号" align="center">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="广告名称" align="center" />
        <el-table-column prop="status" label="广告状态" align="center">
          <template #default="scope">
            <span v-if="scope.row.status === 1">
              <el-tag type="danger">已出租</el-tag>
            </span>
            <span v-else>
              <el-tag type="success">空置</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="cell" label="小区" align="center" />
        <el-table-column prop="position" label="广告位置" align="center" />
        <el-table-column prop="size" label="广告位大小" align="center" />
        <el-table-column prop="price" label="广告价格" align="center">
          <template #default="scope"> ¥{{ scope.row.price }} </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-button
                class="action-btn detail-btn"
                @click="handleDetail(scope.row)"
              >
                详情
              </el-button>
              <el-button
                class="action-btn edit-btn"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                class="action-btn delete-btn"
                @click="handleDelete(scope.row.id)"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container mt-4">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑广告对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="700px"
      :close-on-click-modal="false"
      custom-class="advert-dialog-modern"
    >
      <div class="advert-form-container modern-layout">
        <!-- 左侧表单区域 -->
        <div class="form-content">
          <el-form
            ref="formRef"
            :model="formData"
            :rule="formRules"
            label-position="top"
            class="advert-form"
          >
            <div class="form-grid">
              <el-form-item
                label="广告名称"
                prop="name"
                class="form-item-modern"
              >
                <el-input
                  v-model="formData.name"
                  placeholder="请输入广告名称"
                  class="modern-input"
                />
              </el-form-item>

              <el-form-item label="小区" prop="cellId" class="form-item-modern">
                <el-select
                  v-model="formData.cell"
                  placeholder="请选择小区"
                  class="modern-input"
                >
                  <el-option
                    v-for="cell in cells"
                    :key="cell.cellId"
                    :value="cell.cell"
                    :label="cell.cell"
                  />
                </el-select>
              </el-form-item>
            </div>

            <div class="form-grid">
              <el-form-item
                label="广告状态"
                prop="status"
                class="form-item-modern"
              >
                <el-select
                  v-model="formData.status"
                  placeholder="请选择广告状态"
                  class="modern-input"
                >
                  <el-option :key="1" value="1" label="已出租" />
                  <el-option :key="0" value="0" label="空置" />
                </el-select>
              </el-form-item>

              <el-form-item
                label="广告价格"
                prop="price"
                class="form-item-modern"
              >
                <el-input-number
                  v-model="formData.price"
                  :min="0"
                  :step="1"
                  placeholder="请输入广告价格"
                  class="modern-input"
                />
                <span style="font-size: 18px; padding-left: 10px">¥/月</span>
              </el-form-item>
            </div>

            <div class="form-grid">
              <el-form-item
                label="广告位置"
                prop="position"
                class="form-item-modern"
              >
                <el-input
                  v-model="formData.position"
                  placeholder="请输入广告位置"
                  class="modern-input"
                />
              </el-form-item>

              <el-form-item
                label="广告位大小"
                prop="size"
                class="form-item-modern"
              >
                <el-input
                  v-model="formData.size"
                  placeholder="请输入广告位大小"
                  class="modern-input"
                  style="width: 150px"
                />
                <span style="font-size: 18px; padding-left: 8px">㎡</span>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!-- 右侧图片上传区域 -->
        <div class="form-image">
          <div class="image-upload-wrapper">
            <div class="image-upload-header">
              <el-icon><Picture /></el-icon>
              <span class="upload-title">广告图片</span>
            </div>
            <el-upload
              class="advert-image-uploader"
              :action="'/api/upload/image'"
              name="image"
              :show-file-list="false"
              :on-success="handleImageUpload"
              :before-upload="beforeImageUpload"
            >
              <div v-if="formData.image" class="image-container">
                <img
                  :src="formData.image"
                  class="advert-image"
                  :alt="formData.name || '广告图片'"
                />
                <div class="image-overlay">
                  <span class="change-text">点击更换</span>
                </div>
              </div>
              <div v-else class="image-uploader-placeholder">
                <el-icon class="upload-icon"><Plus /></el-icon>
                <div class="upload-instruction">
                  <div class="upload-text">点击上传</div>
                  <div class="upload-hint">
                    支持 JPG、PNG 格式<br />大小不超过 5MB
                  </div>
                </div>
              </div>
            </el-upload>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button class="cancel-button" @click="dialogVisible = false">
            <el-icon><Close /></el-icon>
            取消
          </el-button>
          <el-button type="primary" class="submit-button" @click="handleSubmit">
            <el-icon><Check /></el-icon>
            确认提交
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 导入广告对话框 -->
    <el-dialog
      v-model="importDialogVisible"
      title="导入广告"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="import-dialog-content">
        <el-upload
          class="upload-area"
          drag
          :auto-upload="false"
          :on-change="handleFileChange"
          :limit="1"
          accept=".xlsx,.xls"
        >
          <el-icon class="el-icon--upload"><Upload /></el-icon>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              只能上传.xlsx/.xls文件，且文件大小不超过10MB
            </div>
          </template>
        </el-upload>

        <div class="import-tips">
          <h4>导入说明：</h4>
          <p>1. 请按照模板格式填写数据</p>
          <p>2. 广告状态请填写"已出租"或"空置"</p>
          <p>3. 确保必填字段都已填写完整</p>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="importLoading"
            @click="handleImport"
          >
            确认导入
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// 导入组件和API
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Plus,
  Search,
  Check,
  Close,
  Picture,
  Upload
} from "@element-plus/icons-vue";
import type { Advert, AdvertQueryParams } from "@/api/advert";
import {
  getAdvertList,
  addAdvert,
  updateAdvert,
  deleteAdvert,
  getAdvertById,
  uploadAdvert
} from "@/api/advert";
import { findAllCells } from "@/api/cell";

// 定义组件名称
defineOptions({ name: "DataCenterAdSlot" });

// 状态管理
const loading = ref(false);
const dialogVisible = ref(false);
const importDialogVisible = ref(false);
const importLoading = ref(false);
const dialogTitle = ref("添加广告");
const formRef = ref();

// 获取所有小区
// { cellId: 1, cell: "小区A" },
// { cellId: 2, cell: "小区B" },
// { cellId: 3, cell: "小区C" }
const cells = reactive([]);

// 获取小区列表
const loadCellList = async () => {
  try {
    const res = await findAllCells();
    if (res.code === 0 && res.data) {
      // 直接使用res.data作为小区列表，并将字段映射为前端需要的格式
      cells.splice(
        0,
        cells.length,
        ...(res.data.map(item => ({
          cellId: item.id,
          cell: item.name
        })) || [])
      );
    } else {
      ElMessage.error(res.message || "获取小区列表失败");
    }
  } catch (error) {
    console.error("获取小区列表失败:", error);
    ElMessage.error("获取小区列表失败");
  }
};

// 显示导入对话框
const showImportDialog = () => {
  importDialogVisible.value = true;
};

// 文件选择处理
const selectedFile = ref<File | null>(null);
const handleFileChange = (file: any) => {
  selectedFile.value = file.raw;

  // 文件大小校验
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    ElMessage.error("上传文件大小不能超过 10MB!");
    return false;
  }

  // 文件类型校验
  const isExcel = file.name.endsWith(".xlsx") || file.name.endsWith(".xls");
  if (!isExcel) {
    ElMessage.error("只能上传 Excel 文件!");
    return false;
  }

  return true;
};

// 处理导入
const handleImport = async () => {
  if (!selectedFile.value) {
    ElMessage.warning("请先选择要导入的文件");
    return;
  }

  importLoading.value = true;
  try {
    const formData = new FormData();
    formData.append("file", selectedFile.value);

    const res = await uploadAdvert(formData);
    if (res.code === 0) {
      ElMessage.success("导入成功");
      importDialogVisible.value = false;
      selectedFile.value = null;
      // 刷新列表
      loadAdvertList();
    } else {
      ElMessage.error(res.message || "导入失败");
    }
  } catch (error) {
    console.error("导入失败:", error);
    ElMessage.error("导入失败");
  } finally {
    importLoading.value = false;
  }
};

// 搜索表单
const searchForm = reactive<AdvertQueryParams>({
  page: 1,
  size: 10,
  name: undefined,
  id: undefined,
  status: undefined,
  community: undefined
});

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 表格数据
const tableData = ref<Advert[]>([]);

// 表单数据
const formData = reactive<Advert>({
  id: "",
  name: "",
  status: undefined,
  cell: "",
  position: "",
  size: "",
  price: 0,
  image: ""
});

// 表单验证规则
const formRules = reactive({
  id: [{ required: true, message: "请输入广告位编号", trigger: "blur" }],
  name: [{ required: true, message: "请输入广告名称", trigger: "blur" }],
  status: [{ required: true, message: "请选择广告状态", trigger: "change" }],
  cell: [{ required: true, message: "请选择小区", trigger: "change" }], // 修复：将community改为cell
  position: [{ required: true, message: "请输入广告位置", trigger: "blur" }],
  size: [{ required: true, message: "请输入广告位大小", trigger: "blur" }],
  price: [
    { required: true, message: "请输入广告价格", trigger: "blur" },
    { type: "number", min: 0, message: "价格不能为负数", trigger: "blur" }
  ]
});

// 生命周期
onMounted(() => {
  loadAdvertList();
  loadCellList();
});

// 加载广告列表
const loadAdvertList = async () => {
  loading.value = true;
  try {
    const params: AdvertQueryParams = {
      ...searchForm,
      page: pagination.currentPage,
      size: pagination.pageSize
    };
    const res = await getAdvertList(params);
    if (res.code === 0 && res.data && res.data.advertList) {
      tableData.value = Array.isArray(res.data.advertList)
        ? res.data.advertList
        : [];
      pagination.total = res.data.count || 0;
    } else {
      ElMessage.error(res.message || "获取广告列表失败");
    }
  } catch (error) {
    console.error("获取广告列表失败:", error);
    ElMessage.error("获取广告列表失败");
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1;
  loadAdvertList();
};

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  loadAdvertList();
};

const handleCurrentChange = (current: number) => {
  pagination.currentPage = current;
  loadAdvertList();
};

// 显示新增对话框
const showAddDialog = () => {
  dialogTitle.value = "添加广告";
  resetForm();
  dialogVisible.value = true;
};

// 编辑
const handleEdit = async (row: Advert) => {
  dialogTitle.value = "编辑广告";
  try {
    const res = await getAdvertById(row.id);
    if (res.code === 0 && res.data) {
      // 确保状态值是字符串类型
      const advertData = {
        ...res.data,
        status: String(res.data.status)
      };
      Object.assign(formData, advertData);
      dialogVisible.value = true;
    } else {
      ElMessage.error(res.message || "获取广告详情失败");
    }
  } catch (error) {
    console.error("获取广告详情失败:", error);
    ElMessage.error("获取广告详情失败");
  }
};

// 查看详情
const handleDetail = async (row: Advert) => {
  dialogTitle.value = "广告详情";
  try {
    const res = await getAdvertById(row.id);
    if (res.code === 0 && res.data) {
      // 确保状态值是字符串类型，与选择器的value类型一致
      const advertData = {
        ...res.data,
        status: String(res.data.status),
        // 确保cellId正确处理
        cellId: res.data.cellId || res.data.cell || ""
      };
      Object.assign(formData, advertData);
      // 禁用表单
      if (formRef.value) {
        const fields = formRef.value.fields;
        fields.forEach((field: any) => {
          field.prop && (field.disabled = true);
        });
      }
      dialogVisible.value = true;
    } else {
      ElMessage.error(res.message || "获取广告详情失败");
    }
  } catch (error) {
    console.error("获取广告详情失败:", error);
    ElMessage.error("获取广告详情失败");
  }
};

// 删除
const handleDelete = (id: string) => {
  ElMessageBox.confirm("确定要删除该广告吗？", "确认删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      try {
        const res = await deleteAdvert(id);
        if (res.code === 0) {
          ElMessage.success("删除成功");
          loadAdvertList();
        } else {
          ElMessage.error(res.message || "删除失败");
        }
      } catch (error) {
        console.error("删除广告失败:", error);
        ElMessage.error("删除失败");
      }
    })
    .catch(() => {});
};

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return;
  try {
    await formRef.value.validate();

    const res = dialogTitle.value.includes("添加")
      ? await addAdvert(formData)
      : await updateAdvert(formData);

    if (res.code === 0) {
      ElMessage.success(
        dialogTitle.value.includes("添加") ? "添加成功" : "修改成功"
      );
      dialogVisible.value = false;
      loadAdvertList();
    } else {
      ElMessage.error(res.message || "操作失败");
    }
  } catch (error) {
    console.error("提交表单失败:", error);
  }
};

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
    // 启用表单
    const fields = formRef.value.fields;
    fields.forEach((field: any) => {
      field.prop && (field.disabled = false);
    });
  }
  Object.assign(formData, {
    id: "",
    name: "",
    status: undefined,
    cell: "", // 修复：重置小区字段
    position: "", // 修复：重置广告位置字段，不是location
    size: "",
    price: 0,
    image: ""
  });
};

// 处理图片上传成功
const handleImageUpload = (response: any) => {
  if (response.code === 0 && response.data) {
    formData.image = response.data;
    ElMessage.success("图片上传成功");
  } else {
    ElMessage.error(response.message || "图片上传失败");
  }
};

// 图片上传前的校验
const beforeImageUpload = (file: File) => {
  const isJPG =
    file.type === "image/jpeg" ||
    file.type === "image/png" ||
    file.type === "image/jpg";
  const isLt5M = file.size / 1024 / 1024 < 5;

  if (!isJPG) {
    ElMessage.error("上传图片只能是 JPG/PNG 格式!");
  }
  if (!isLt5M) {
    ElMessage.error("上传图片大小不能超过 5MB!");
  }
  return isJPG && isLt5M;
};
</script>

<style scoped>
/* 导入对话框样式 */
.import-dialog-content {
  padding: 10px 0;
}

.upload-area {
  margin-bottom: 20px;
}

.import-tips {
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.import-tips h4 {
  margin: 0 0 10px 0;
  color: #409eff;
  font-size: 14px;
}

.import-tips p {
  margin: 5px 0;
  font-size: 13px;
  color: #666;
}

.dialog-footer {
  text-align: right;
}

/* 表格样式 */
.el-table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

:deep(.el-table__header-wrapper) {
  background-color: #f8f9fa;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  font-weight: 600;
  font-size: 14px;
  color: #303133;
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-table td) {
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
  color: #606266;
}

:deep(.el-table__row) {
  transition: background-color 0.2s;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

:deep(.el-table__row.current-row) {
  background-color: #ecf5ff;
}

/* 表格状态标签样式优化 */
.status-tag {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.status-rented {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}

.status-empty {
  background-color: #f0f9eb;
  color: #67c23a;
  border: 1px solid #b3e19d;
}

/* 表格操作按钮样式 */
:deep(.el-table__column--action .el-button) {
  padding: 8px 12px;
  margin: 0 4px;
  border-radius: 6px;
  font-size: 13px;
}

:deep(.el-table__column--action .el-button--text.el-button--primary) {
  color: #67c23a;
}

:deep(.el-table__column--action .el-button--text.el-button--primary:hover) {
  color: #85ce61;
  background-color: #f0f9eb;
}

:deep(.el-table__column--action .el-button--text.el-button--danger) {
  color: #f56c6c;
}

:deep(.el-table__column--action .el-button--text.el-button--danger:hover) {
  color: #f78989;
  background-color: #fef0f0;
}

/* 工具栏样式 */
.toolbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.search-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 统一搜索框样式 */
.search-input {
  border-radius: 8px;
  width: 240px;
  transition: all 0.3s;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 8px;
}

.search-select {
  border-radius: 8px;
  width: 150px;
}

.search-select :deep(.el-input__wrapper) {
  border-radius: 8px;
}

/* 主操作按钮样式 */
.primary-button {
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
  transition: all 0.3s;
}

.primary-button:hover {
  background: linear-gradient(135deg, #85ce61 0%, #a0de72 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

.primary-button:active {
  transform: translateY(0);
}

:deep(.primary-button .el-icon) {
  margin-right: 6px;
}
.main {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 卡片通用样式 */
.el-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.el-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.el-card__body {
  padding: 24px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

:deep(.el-pagination) {
  font-size: 14px;
}

:deep(.el-pagination .el-pager li) {
  min-width: 32px;
  height: 32px;
  line-height: 30px;
  border-radius: 6px;
  margin: 0 2px;
  transition: all 0.3s;
}

:deep(.el-pagination .el-pager li:hover:not(.disabled)) {
  color: #67c23a;
  background-color: #f0f9eb;
}

:deep(.el-pagination .el-pager li.active) {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}

:deep(.el-pagination button:hover:not(.disabled)) {
  color: #67c23a;
  border-color: #c2e7b0;
  background-color: #f0f9eb;
}

/* 表单网格布局 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-item-modern {
  margin-bottom: 0;
}

/* 现代风格对话框 */
.advert-dialog-modern {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

:deep(.advert-dialog-modern .el-dialog__header) {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  padding: 24px 30px;
  border-bottom: none;
}

:deep(.advert-dialog-modern .el-dialog__title) {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

:deep(.advert-dialog-modern .el-dialog__close) {
  color: #ffffff;
  font-size: 20px;
  opacity: 0.8;
  transition: all 0.3s;
}

:deep(.advert-dialog-modern .el-dialog__close:hover) {
  opacity: 1;
  transform: scale(1.1);
}

:deep(.advert-dialog-modern .el-dialog__body) {
  padding: 30px;
  background-color: #fafafa;
}

:deep(.advert-dialog-modern .el-dialog__footer) {
  padding: 20px 30px;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
}

/* 现代输入框 */
.modern-input :deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  background-color: #f8f9fa;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-input :deep(.el-input__wrapper:hover) {
  border-color: #c0c4cc;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.1);
}

.modern-input :deep(.el-input__wrapper.is-focus) {
  border-color: #67c23a;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
}

/* 图片上传区域 */
.image-upload-wrapper {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.image-upload-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}

:deep(.image-upload-header .el-icon) {
  color: #67c23a;
  font-size: 18px;
}

.upload-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

/* 广告图片上传器 */
.advert-image-uploader {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  display: block;
}

.image-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.image-container:hover {
  transform: scale(1.02);
}

.advert-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 12px;
  text-align: center;
}

.change-text {
  color: #ffffff;
  font-size: 12px;
}

.image-uploader-placeholder {
  width: 100%;
  height: 100%;
  border: 2px dashed #dcdfe6;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s;
}

.image-uploader-placeholder:hover {
  border-color: #67c23a;
  background-color: #f0f9e8;
}

.upload-icon {
  font-size: 32px;
  color: #c0c4cc;
  margin-bottom: 12px;
}

.upload-instruction {
  text-align: center;
}

.upload-text {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 4px;
}

.upload-hint {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-button {
  border-radius: 8px;
  border-color: #dcdfe6;
  color: #606266;
  transition: all 0.3s;
  padding: 8px 24px;
}

.cancel-button:hover {
  border-color: #c0c4cc;
  background-color: #f5f7fa;
  color: #303133;
}

.submit-button {
  border-radius: 8px;
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
  transition: all 0.3s;
  padding: 8px 24px;
}

.submit-button:hover {
  background: linear-gradient(135deg, #85ce61 0%, #a0de72 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

:deep(.dialog-footer .el-button .el-icon) {
  margin-right: 6px;
}

/* 响应式设计增强 */
@media (max-width: 1200px) {
  .search-input {
    width: 200px;
  }
}

@media (max-width: 992px) {
  .main {
    padding: 16px;
  }

  .toolbar-container {
    flex-direction: column;
    align-items: stretch;
  }

  .search-group {
    justify-content: center;
  }

  .search-input {
    width: calc(50% - 10px);
    min-width: 180px;
  }

  .search-select {
    width: calc(50% - 10px);
    min-width: 120px;
  }
}

@media (max-width: 768px) {
  .el-card__body {
    padding: 16px;
  }

  .search-group {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input,
  .search-select {
    width: 100%;
  }

  .el-button {
    width: 100%;
  }

  /* 表格响应式调整 */
  :deep(.el-table) {
    font-size: 12px;
  }

  :deep(.el-table th),
  :deep(.el-table td) {
    padding: 12px 0;
  }

  /* 操作按钮组调整 */
  :deep(.el-table__column--action) {
    width: 160px !important;
  }

  :deep(.el-table__column--action .el-button) {
    padding: 6px 8px;
    font-size: 12px;
  }

  .advert-form-container.modern-layout {
    flex-direction: column;
    gap: 20px;
  }

  .form-image {
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .advert-image-uploader {
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 576px) {
  .main {
    padding: 12px;
  }

  :deep(.el-table) {
    font-size: 11px;
  }

  /* 移动端表格特殊处理 */
  .table-container {
    overflow-x: auto;
  }
}

/* 小区下拉框样式增强 */
.cell-select :deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  background-color: #f8f9fa;
  transition: all 0.3s;
}

.cell-select :deep(.el-input__wrapper:hover) {
  border-color: #c0c4cc;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.1);
}

.cell-select :deep(.el-input__wrapper.is-focus) {
  border-color: #67c23a;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
}

/* 下拉选项样式优化 */
:deep(.el-select-dropdown) {
  border-radius: 8px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

:deep(.el-select-dropdown__item) {
  padding: 10px 20px;
  transition: all 0.2s;
}

:deep(.el-select-dropdown__item:hover) {
  background-color: #f0f9eb;
  color: #67c23a;
}

:deep(.el-select-dropdown__item.selected) {
  background-color: #f0f9eb;
  color: #67c23a;
}

/* 操作按钮组美化 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.action-btn {
  min-width: 50px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.detail-btn {
  background-color: #ecf5ff;
  color: #409eff;
  border-color: #b3d8ff;
}

.detail-btn:hover {
  background-color: #409eff;
  color: #ffffff;
  border-color: #409eff;
}

.edit-btn {
  background-color: #f0f9eb;
  color: #67c23a;
  border-color: #c2e7b0;
}

.edit-btn:hover {
  background-color: #67c23a;
  color: #ffffff;
  border-color: #67c23a;
}

.delete-btn {
  background-color: #fef0f0;
  color: #f56c6c;
  border-color: #fbc4c4;
}

.delete-btn:hover {
  background-color: #f56c6c;
  color: #ffffff;
  border-color: #f56c6c;
}

/* 响应式设计增强 */
@media (max-width: 1200px) {
  .search-input {
    width: 200px;
  }

  /* 操作按钮组调整 */
  .action-buttons {
    gap: 6px;
  }

  .action-btn {
    min-width: 45px;
    padding: 5px 8px;
    font-size: 11px;
  }
}
</style>
